<template>
  <view class="wrap">
    <view class="main" v-if="hasLoad">
      <view class="swiper-section" v-if="state.slide_list.length > 0">
        <swiper class="swiper-list" :indicator-dots="state.slide_list.length > 1" autoplay circular
                @change="onSwiperChange">
          <swiper-item class="swiper-item" @click="redirect(item.redirect_type, item.redirect_data)"
                       v-for="(item, index) in state.slide_list" :key="index">
            <image :src="item.image_url" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="box">
        <view class="main-entry">
          <view class="b-shop" v-if="shopData">
            <view class="b-main">
              <view class="b-title">
                <view class="s-name">{{shopData.name}}</view>
                <view class="s-state f-rest" v-if="shopData.state==0">已休息</view>
                <view class="s-state f-ing" v-else-if="shopData.state==1">营业中</view>
                <view class="s-switch" @click="onChooseShop()"><img class="img" src="@/static/imgs/switch.png"  >切换门店</view>
              </view>
              <view class="b-address"  @click="onPhoneCall(shopData.contact)">
                <view class="s-icon iconfont icon-contract"></view>
                <view class="s-cont">{{shopData.contact}}</view>
                <view class="s-icon iconfont icon-time-range"></view>
                <view class="s-cont">{{shopData.start_time}} - {{shopData.end_time}}</view>
              </view>
              <view class="b-address" v-if="shopData.address" @click="onOpenAddress">
                <view class="s-icon iconfont icon-address"></view>
                <view class="s-cont">{{shopData.address}}</view>
                <view class="iconfont icon-direct" v-if="shopData.latitude  && shopData.longitude"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="box b-recommend" v-if="false">
        <view class="box-head">
          <image class="s-tit" src="@/static/imgs/head-new.png" mode="aspectFit"></image>
          <view class="s-desc">探索美食的无限风味</view>
        </view>
        <view class="box-main scroll-column">
          <scroll-view class="scroll-view" scroll-x>
            <view class="b-row" v-for="(item, index) in state.new_list" :key="index">
              <food-item :item="item" scene="new" @show="onShowFood" @addCart="onAddCart">
              </food-item>
            </view>
          </scroll-view>
        </view>
      </view>
      <view class="box">
        <view class="box-head">
          <view class="s-title">热门路线</view>
          <view class="s-desc">和宠物探索无限世界</view>
        </view>
        <view class="box-main food-list">
          <food-item v-for="(item, index) in state.food_list" :key="index" :item="item" @show="onShowFood"
                     @addCart="onAddCart">
          </food-item>
        </view>
      </view>
    </view>
    <view class="more-blank" v-if="showCart"></view>
    <!-- 扫下单码 -->
    <!--		<scan-desk ref="scanDesk" @bindChange="onDeskChange"></scan-desk>-->
    <!-- 菜品详情 -->
    <food-view ref="foodView" :item="foodData" @addCart="onAddCart" @close="onShowCart"></food-view>
    <!-- 快捷购物车 -->
    <quick-cart ref="quickCart"></quick-cart>
  </view>
</template>

<script>
import {
  getHomeData
} from '@/service/api/page.js'
import {
  getUserInfo
} from '@/service/api/user.js'
import Util from '@/common/util.js'
import mixinsJsapi from '@/mixins/jsapi.js'
import mixinsAuth from '@/mixins/auth.js'
import mixinsCommon from '@/mixins/common.js'
export default {
  mixins: [mixinsCommon, mixinsAuth, mixinsJsapi],
  data() {
    return {
      swiperBackground: '',
      swiperCurrent: 0,
      swiperLength: 0,
      state: null,
      hasLoad: false,
      loadingType: 1,
      loadingText: ''
    }
  },
  computed: {
    shopData() {
      return this.state.shop_data
    },
    deskData() {
      return this.state.desk_data
    }
  },
  onShareAppMessage(res) {
    console.log('onShareAppMessage', res)
    let shareData = this.$store.getters.shareData

    return {
      title: shareData.title,
      path: shareData.path,
      imageUrl: shareData.image
    }
  },
  onLoad(options) {
    let params = options
    if (options.scene) {
      params = Util.urlDecode(decodeURIComponent(options.scene))
    }
    if (params.sid) {
      this.$store.commit('setShopId', params.sid)
      this.$store.commit('delDeskId')
    }
    if (this.$store.getters.shopId) {
      this.loadHomeData()
    } else {
      if (this.$store.getters.accessToken) {
        uni.reLaunch({
          url: '/pages/shop/index'
        })
      }
    }

    if (this.isLogin) {
      getUserInfo().then(([err, res]) => {
        if (!err) {
          this.$store.commit('userInfo', res)
        }
      })
    }
  },
  methods: {
    loadHomeData() {
      getHomeData(this.$store.getters.deskId).then(([err, res]) => {
        console.log('getHomeData', err, res)
        if (!err) {
          this.hasLoad = true
          this.loadingType = -1
          this.state = res
          if (!res.desk_data) {
            if (!this.$store.getters.scanDeskTip) {
              //this.$store.commit('setScanDeskTip', true)
              // setTimeout(() => {
              // 	this.$refs.scanDesk.show()
              // }, 500)
            }
          }
        } else {
          this.loadingType = 3
          this.loadingText = err.data.msg || '加载失败'
        }
      })
    },
    onSwiperChange(e) {
      console.log('onSwiperChange', e)
    },
    onChooseShop(e) {
      uni.navigateTo({
        url: '/pages/shop/index'
      })
    },
    onPhoneCall(phone){
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    onScanCode() {
      // #ifdef  MP-WEIXIN
      uni.scanCode().then(([err, res]) => {
        console.log('uni.scanCode', err, res)
        if (!err) {
          let urlData = Util.urlDecode(res.path)
          console.log('urlData', urlData)
          if (!urlData || !urlData.scene) {
            return this.$logic.showToast('下单码不对')
          }
          let sceneData = null
          if (res.path.indexOf('&') !== -1) {
            sceneData = Util.urlDecode(res.path.slice(res.path.indexOf('?scene=') + 7))
          } else {
            sceneData = Util.urlDecode(decodeURIComponent(urlData.scene))
          }
          console.log('sceneData', sceneData)
          if (!sceneData || !sceneData.did) {
            return this.$logic.showToast('下单码不对')
          }
          this.onDeskChange(sceneData)
        }
      })
      // #endif

      // #ifdef  H5
      const that = this
      wx.scanQRCode({
        needResult: 1,
        success: function(res) {
          console.log('wx.scanQRCode', res)
          let urlData = Util.urlDecode(res.resultStr)
          console.log('urlData', urlData)
          if (!urlData || !urlData.scene) {
            return that.$logic.showToast('下单码不对')
          }
          let sceneData = null
          if (res.resultStr.indexOf('&') !== -1) {
            sceneData = Util.urlDecode(res.resultStr.slice(res.resultStr.indexOf('?scene=') +
                7))
          } else {
            sceneData = Util.urlDecode(decodeURIComponent(urlData.scene))
          }
          console.log('sceneData', sceneData)
          if (!sceneData || !sceneData.did) {
            return that.$logic.showToast('下单码不对')
          }
          that.onDeskChange(sceneData)
        }
      })
      // #endif
    },
    onDeskChange(e) {
      this.$store.commit('setDeskId', e.did)
      if (e.sid != this.$store.getters.shopId) {
        this.$store.commit('setShopId', e.sid)
        this.loadHomeData()
      } else {
        this.state.desk_data = {
          id: e.did,
          number: e.number
        }
      }
    },
    onOpenAddress() {
      const shopData = this.state.shop_data
      if (!shopData.latitude || !shopData.longitude) {
        return
      }
      uni.openLocation({
        latitude: shopData.latitude,
        longitude: shopData.longitude,
        name: shopData.name,
        address: shopData.address
      })
    }
  }
}
</script>

<style lang="scss">
page {
  padding-bottom: env(safe-area-inset-bottom);
  background: $pq-bg-color;
}

.wrap {
  padding-bottom: 30upx;
}

.main {}

// 轮播图
.swiper-section {

  .swiper-list {
    height: 500upx;

    .swiper-item {
      width: 750upx;
      height: 500upx;

      image {
        width: 750upx;
        height: 500upx;
      }
    }
  }
}


.main-entry {
  //margin-top: -50upx;
  //left: 20upx;
  padding: 30upx 0 30upx 0;
  border-radius: 20upx;
  background: #fff;
  margin: 20upx 0;
  box-shadow: 0rpx 4rpx 15rpx 0rpx rgba(0, 0, 0, 0.04);
  z-index: 100;

  .b-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;

    image {
      height: 152px;
      width: 100%;
      margin-top: -5px;
    }
  }

  .b-line {
    .s-line {
      margin: 0 auto;
      width: 577upx;
      border-bottom: 2upx solid #eee;
    }
  }

  .b-shop {
    // margin-top: 30upx;
    padding: 0upx 30upx 0 30upx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .b-cover {
      width: 100upx;
      height: 100upx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 10upx;
      }
    }

    .b-main {
      margin-left: 20upx;
      flex: 1;
      display: flex;
      flex-direction: column;

      .title200{
        width: 200rpx;
      }
      .b-title {
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .s-name {
          font-size: 30upx;
          color: $pq-main-color;
        }
        .s-switch{
          margin-left: auto;
          align-items: center;
          display: flex;
          font-size: 15px;
          color: #808080;
          .img{
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }
        }

        .s-state {
          margin-left: 20upx;
          font-size: 28upx;
          color: #666;
          font-weight: bold;

          &.f-rest {
            color: #FF9523;
          }

          &.f-ing {
            color: #FFC300;
          }
        }


        .s-more {
          margin-left: 20upx;
          color: $pq-minor-color;
          font-size: 24upx;
        }
      }

      .b-address {
        margin-top: 20upx;
        display: flex;
        align-items: unset;

        .s-cont {
          font-size: 26upx;
          color: $pq-minor-color;
        }

        .iconfont {
          margin-left: 10upx;
          font-size: 36upx;
          color: $pq-minor-color;
        }
      }
    }

    .b-desk {
      margin-right: 30upx;
      display: flex;
      align-items: center;
      flex-direction: column;

      .s-tit {
        font-size: 26upx;
        color: $pq-main-color;
      }

      .s-desk {
        margin-top: 20upx;
        font-size: 24upx;
        color: $pq-minor-color;

        &.f-number {}

        &.f-scan {
          display: flex;
          align-items: center;

          .iconfont {
            margin-right: 10upx;
            font-size: 30upx;
          }
        }
      }
    }
  }
}

.box {
  margin: 30upx 20upx 0 20upx;
  background: #fff;
  border-radius: 20upx;

  &.b-recommend {
    margin-top: 340upx;
  }

  .box-head {
    padding: 0 20upx;
    height: 100upx;
    line-height: 100upx;
    font-size: 30upx;
    color: #333;
    display: flex;
    align-items: center;

    image.s-tit {
      width: 130upx;
      height: 36upx;
    }

    .s-desc {
      margin-left: 20upx;
      font-size: 24upx;
      color: #808080;
    }
  }

  .box-main {
    padding: 0 20upx 30upx 20upx;
  }

  .scroll-column {
    width: 670upx;
    overflow: hidden;

    .scroll-view {
      white-space: nowrap;

      .b-row {
        margin-right: 20upx;
        display: inline-block;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .food-list {
    // 小程序是food-item .food-item，H5是.food-item
    .food-item {
      margin-top: 15upx;
      margin-bottom: 15upx;
      padding: 0;
    }
  }
}
</style>